<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>发表说说</title>
    <th:block th:replace="include/css"/>
    <link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css">
    <link rel="stylesheet" href="/static/css/shuoshuo.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/fzqblog.css">
    <style type="text/css">
        textarea {
            border: 1px solid #66afe9;
        }

        .user-info, .like-info,.comment-info{
            margin: 0 10px 10px 0;
        }

        .main-content {
            text-indent: 2em;
            line-height: 23px;
        }

        .shuoshuo-item-info {
            border-bottom: 1px solid #DDDEDD;
        }

        .shuoshuo-item-info a {
            margin: 0 20px;
        }

        .user-like {
            border: 1px solid #e6e6e6;
            padding: 6px;
            width: 30px;
            height: 30px;
        }

        .user-like-info {
            border: 1px solid #e6e6e6;
            width: 30px;
            height: 30px;
            display: inline;
            border-radius: 2px;
        }

        .user-thumbnail img {
            margin-left: 10px;
            cursor: url("/static/images/cur_zin.cur"), pointer;
        }

        }
        .user-comment-panel {
            padding: 10px 20px 0px 20px;
            border-bottom: 1px solid #DDDEDD;
        }

        .comment-item {
            border-bottom: 1px solid #EEEFEE;
            padding: 10px 0px;
        }

        .comment-user-icon {
            float: left;
            width: 30px;
        }

        .comment-main {
            margin-left: 40px;
        }

        .comment-content {
            word-wrap: break-word;
            word-break: normal;
            line-height: 20px;
        }

        .user-icon-image {
            width: 30px;
            height: 30px;
            display: inline;
        }

        .comment-op {
            margin-top: 10px;
        }

        .comment-op span {
            color: #9B9C9B;
            font-size: 12px;
        }

        .comment-op a {
            margin-left: 10px;
            display: inline-block;
        }

        .comment-form {
            padding: 10px 20px;
            display: none;

        }

        .comment-form-op a {
            margin-right: 8px;
        }

        .comment-form textarea {
            width: 442px;
            height: 100px;
            border-radius: 5px;
            padding: 10px;
        }

        .icon-op-at {
            display: inline-block;
            width: 22px;
            height: 22px;
            background-position: 0px 0px;
        }

        .icon-op-at:hover {
            background-position: -40px 0px;
        }

        .icon-op-emotion:hover {
            background-position: -40px -40px;
        }

        .icon-op-emotion {
            display: inline-block;
            width: 22px;
            height: 22px;
            background-position: 0px -40px;
        }

        .reply {
            float: right;
        }

        textarea {
            border-radius: 5px;
            padding: 10px;
            border-color: #217dbb;
        }

        .send_shuoshuo_op {
            margin-top: 5px;
            height: 30px;
        }

        span.img-info {
            color: #A2A3A2;
            margin-left: 15px;
        }


        .send_shuoshuo_op a {
            display: inline-block;
            margin-right: 10px;
            height: 22px;
            width: 22px;
            vertical-align: bottom;
            float: left;
            margin-top: 0px;
        }

        .icon-op-img {
            display: inline-block;
            width: 22px;
            height: 22px;
            background-position: 0px -120px;
        }

        /**
            重写webloader的样式
        */
        .webuploader-pick {
            background: none;
            padding: 0px;
        }

        /*
            关于上传中缩列图的显示
        */
        #image-con {
            margin: 0 250px;
            text-align: left;
        }

        #image-con span {
            display: inline-block;
            position: relative;
            border: 1px solid #DDDDDD;
            padding: 2px;
            margin-right: 10px;
        }

        #image-con span img {
            max-width: 150px;
            max-height: 150px;
        }

        #image-con span a {
            position: absolute;
            top: -7px;
            right: -7px;
            width: 16px;
            height: 16px;
        }

        .load-more {
            margin-left: 100px;
            text-align: center;
        }

        .load-more a {
            text-decoration: none;
            color: #5D7895;
            padding: 10px;
            display: block;
        }

        a.at_user {
            display: inline-block;
            padding: 5px;
            text-decoration: none;
            font-size: 12px;
            margin-left: 5px;
            width: 120px;
        }

        .at_user:hover {
            background: #D2E8F9;
        }

        .emotion {
            display: inline-block;
            border: 1px solid #fff;
            cursor: pointer;
            margin: 2px 1px 1px 0px;
        }

        .emotion:hover {
            border: 1px solid #18bc9c;
        }
    </style>
</head>

<body>
<th:block th:replace="include/header:: header"/>
<div style="width: 800px;margin:0 auto;">
    <div class="input-group">
        <textarea id="shuoShuoArea" style="width: 723px;height: 86px;margin-top: 5px;"></textarea>
        <span class="input-group-btn">
	        <button class="btn btn-info" type="button" style="height: 86px;" id="publicShuoShuo">发说说</button>
	      </span>
    </div>
    <div class="send_shuoshuo_op">
        <a href="javascript:;" title="@好友" id="op-at"><i class="icon icon-op-at"></i></a>
        <a href="javascript:;" title="插入表情" id="op-emotion"><i class="icon icon-op-emotion"></i></a>
        <a id="upload-image" href="javascript:;" title="插入图片" class="op-image">
            <i class="icon icon-op-img"></i>
        </a>
        <span class="img-info">最多可以上传3张图片</span>
    </div>
</div>

<div class="image-con" id="image-con">
</div>
<section id="cd-timeline" class="cd-container">
</section>
<th:block th:replace="include/footer:: footer"/>
<th:block th:replace="include/top"/>
<script type="text/javascript" src="/static/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="/static/js/shuoshuo.js"></script>
<script type="text/javascript">

</script>
</body>
</html>